<template>
  <a-layout style="min-height: 100vh;">
    <a-layout-header class="header" :style="{ position: 'fixed', zIndex: 1, width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#FFFFFF' }">
      <div class="logo-text">通用开发模板</div>
      <div class="right-menu">
        <template v-if="isLoggedIn">
          <a-dropdown>
            <a class="user-dropdown-link" @click.prevent>
              <a-avatar :src="userAvatar || 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'" />
              <span class="username">{{ username }}</span>
              <down-outlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item key="profile" @click="goToProfile">
                  <user-outlined />
                  个人中心
                </a-menu-item>
                <a-menu-item key="settings">
                  <setting-outlined />
                  设置
                </a-menu-item>
                <template v-if="isAdmin">
                  <a-menu-divider />
                  <a-menu-item key="admin" @click="goToAdmin">
                    <crown-outlined />
                    管理系统
                  </a-menu-item>
                </template>
                <a-menu-divider />
                <a-menu-item key="logout" @click="handleLogout">
                  <logout-outlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
        <template v-else>
          <a-button type="primary" class="login-btn" @click="showLoginModal">登录</a-button>
          <a-button class="register-btn" @click="showRegisterModal">注册</a-button>
        </template>
      </div>
    </a-layout-header>
    <a-layout-content :style="{ padding: '0 50px', marginTop: '84px', flex: '1' }">
      <div class="content-container" :style="{ background: '#fff', padding: '24px', minHeight: 'calc(100vh - 84px - 70px)' }">
        <!-- 使用router-view代替动态组件 -->
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
    </a-layout-content>
    <a-layout-footer :style="{ textAlign: 'center' }">
      ©2025 Created by wsy
    </a-layout-footer>
  </a-layout>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import { DownOutlined, UserOutlined, SettingOutlined, LogoutOutlined, CrownOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { message } from 'ant-design-vue';

const router = useRouter();
const userStore = useUserStore();
const selectedKeys = ref(['2']);

// 使用computed确保响应性
const isLoggedIn = computed(() => userStore.isLoggedIn);
const username = computed(() => userStore.userInfo.username || '用户');
const userAvatar = computed(() => userStore.userInfo.avatar);
const userId = computed(() => userStore.userInfo.id);
// 判断是否为管理员
const isAdmin = computed(() => userStore.isAdmin());

// 显示登录弹窗 - 跳转到登录页面
const showLoginModal = () => {
  router.push('/login');
};

// 显示注册弹窗 - 跳转到登录页面的注册标签
const showRegisterModal = () => {
  router.push({ path: '/login', query: { tab: 'register' } });
};

// 退出登录
const handleLogout = async () => {
  try {
    await userStore.logout();
    message.success('退出登录成功');
    // 退出登录后返回首页
    router.push('/');
  } catch (error) {
    console.error('退出登录失败:', error);
    message.error('退出登录失败，请稍后重试');
  }
};

// 跳转到个人中心
const goToProfile = () => {
  router.push('/profile');
};

// 跳转到管理系统
const goToAdmin = () => {
  router.push('/admin');
};

// 初始化时加载用户状态，并获取最新的用户信息
onMounted(async () => {
  userStore.initUserState();
  // 如果已登录，获取最新的用户信息
  if (isLoggedIn.value) {
    await userStore.fetchUserInfo();
  }
});
</script>
<style scoped>
.logo-text {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
  margin: 16px 24px 16px 0;
  float: left;
}
.header {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.site-layout .site-layout-background {
  background: #fff;
}
.right-menu {
  display: flex;
  align-items: center;
}
.user-dropdown-link {
  display: flex;
  align-items: center;
  color: #333; /* 深色文字 */
  cursor: pointer;
}
.username {
  margin: 0 8px;
  color: #333; /* 深色文字 */
}
.login-btn {
  margin-right: 8px;
}
.content-container {
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
</style>